<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
        v-bind 实现简易轮播
-->
<div id="app">
    <img :src="img" alt="">
    <br>
    <button @click="pre">上一张</button>
    <button @click="next">下一张</button>
</div>

<script !src="">
    let vm = new Vue({
        el:'#app',
        data:{
            img:'../resources/1.png',
            imgs:['../resources/1.png','../resources/2.png','../resources/3.png','../resources/4.png'],
            index:0
        },
        methods:{
            pre(){
                this.index--
                if (this.index<0){
                    this.index = 3
                }
                this.img = this.imgs[this.index]
            },
            next(){
                this.index++
                if (this.index > 3){
                    this.index = 0
                }
                this.img = this.imgs[this.index]
            }
        }
      })
</script>
</body>
</html>